<template>
  <div class="login-container">
   <!--
     配置表单验证
     1.必须给el-form组件绑定model为表单数据对象
     2.给需要验证的表单项（el-form-item）绑定prop属性 注意prop需要指定表单对象中的数据名称
     3.el-form组件的rules属性配置验证规则
     4.手动触发表单验证
      （1）给el-form设置ref
      （2）通过ref获取el-form组件，调用组件的validate方法
    -->
    <el-form ref="userForm" :model="user"  class="login" :rules="formRules">
        <el-form-item class="login-tit">
          <h2>用户登录</h2>
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input v-model="user.mobile" placeholder="请输入手机号" prefix-icon="el-icon-mobile-phone"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="user.code" placeholder="请选输入验证码" prefix-icon="el-icon-key"></el-input>
        </el-form-item>
        <el-form-item prop="isAgree">
          <el-checkbox v-model="user.isAgree">我已阅读并同意用户协议和隐私条款</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" :loading="loading" @click="onLogin">登录</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from '@/api/user.js'
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    // 自定义验证规则
    // 验证通过 callback()  一定要调用！！！
    // 验证失败 callback(new Error('错误消息'))
    var isAgree = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请勾选阅读并同意用户协议和隐私条款'))
      } else {
        callback()
      }
    }
    return {
      user: {
        mobile: '13911111111',
        code: '246810',
        isAgree: true // 是否同意协议
      },
      loading: false,
      formRules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'change' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          { pattern: /^\d{6}$/, message: '请输入正确的验证码格式', trigger: 'change' }
        ],
        isAgree: [
          { required: true, validator: isAgree, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    onLogin () {
      // 表单验证
      this.$refs.userForm.validate((valid) => {
        console.log(valid)
        if (!valid) {
          // 如果验证失败
          return false
        } else {
          this.login()
        }
      })
    },
    login () {
      // 获取表单数据
      this.loading = true
      login(this.user).then(res => {
        console.log(res)
        // 关闭loading
        this.loading = false
        this.$message({
          message: '恭喜你，登录成功',
          type: 'success'
        })
        // 将接口返回的用户相关数据放到本地存储，方便应用数据共享
        window.localStorage.setItem('user', JSON.stringify(res.data.data))
        // 路由的跳转最好都放到最后
        this.$router.push({
          name: 'home'
        })
      }).catch(err => {
        this.$message.error('登录失败了，请检查手机号和验证码')
        // 关闭loading
        this.loading = false
        console.log('登录失败', err)
      })
    }
  }
}
</script>

<style scoped lang="less">
.login-container{

  height:100%;
  position:relative;
  min-width: 1400px;
  background: url(~@/assets/login_bg.jpg) no-repeat;
  h2{
    font-size: 20px;
    color:#000;
    text-align: center;
    line-height: 22px;
  }
  .login{
    height:300px;
    background: #fff;
    border-radius: 20px;
    width:400px;
    padding:40px;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    .login-tit{
       margin-bottom: 0px;
    }
    .login-btn{
       width: 100%;
    }
  }
}
</style>
